{% extends "base.html" %}
{% load static %}

{% block add_styles %}
    {{ block.super }}
    .chosen-container {
    width: 70% !important;
    }
    .editor-toolbar, .editor-statusbar, .editor-preview-side, .CodeMirror {
    width: 70% !important;
    }
{% endblock %}
{% block add_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'easymde/dist/easymde.min.css' %}">
{% endblock %}
{% block content %}
    {{ block.super }}
    <h3> Risk acceptance</h3>
    <div id="risk_acceptance">
        <p>
        </p>
        <p>
            A risk acceptance can consist of compensating control(s) and documentation.
            Documentation can be in the form of an image or PDF file.<br/>
            Select the findings that apply to this acceptance. These findings will be automatically deactivated.
        </p>
        <br/>
        <form id="add_risk_acceptance" enctype="multipart/form-data" class="form-horizontal" method="post">
            {% csrf_token %}
            {% include "dojo/form_fields.html" with form=form %}
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input class="btn btn-primary" type="submit" value="Save"/>
                </div>
            </div>
            <br/><br/>
        </form>
    </div>
{% endblock %}
{% block postscript %}
    {{ block.super }}
<script type="application/javascript" src="{% static 'easymde/dist/easymde.min.js' %}"></script>
<script type="text/javascript">
    $("#add_risk_acceptance textarea").each(function (index, elem) {
        if (elem.id != 'id_notes') {
            if (elem.hasAttribute("required")) {
                elem.removeAttribute("required");
                elem.id = "req"
            }

            var mde = new EasyMDE({
                spellChecker: false,
                inputStyle: "contenteditable",
                element: elem,
                autofocus: false,
                forceSync: true,
                toolbar: ["bold", "italic", "heading", "|",
                    "quote", "unordered-list", "ordered-list", "|",
                    "link", "image", "|",
                    "table", "horizontal-rule", "code", "|",
                    "guide"
                ]
            });
            mde.render();
        }
    });
</script>
{% endblock %}
